<template>
  <div class="container">
    <img class="login-bg" :src="background" alt="" />

    <a-card class="login-card">
      <div class="angle_mark">
       <wechat-outlined @click="changeLogin"/>
      </div>
      <a-form :model="formState" name="normal_login" class="login-form" @finish="onLogin">
        <a-form-item>
          <div class="login-form-header">TRIAL创迹零售管理平台</div>
          <div class="login-form-desc">一款让零售更便捷的智慧管理平台</div>
        </a-form-item>
        <a-form-item name="language" :rules="[{ required: true, message: '请选择语言！' }]" class="input-style">
        <a-select v-model:value="formState.language">
          <a-select-option value="中文">中文</a-select-option>
          <a-select-option value="日语">日语</a-select-option>
        </a-select>
        </a-form-item>
        <a-form-item name="username" :rules="[{ required: true, message: '请输入账户!' }]" class="input-style">
          <a-input v-model:value="formState.username" placeholder="账户" size="middle">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item name="password" :rules="[{ required: true, message: '请输入密码!' }]" class="input-style">
          <a-input-password v-model:value="formState.password" placeholder="密码" size="middle">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]" class="input-style">
          <a-row>
            <a-col :span="10">
             <a-input v-model:value="formState.code" placeholder="验证码" size="middle"></a-input>
            </a-col>
            <a-col :span="10" style="margin-left: -8%;">
              <canvas ref="canvas" width="100" height="30"  @click="refresh"></canvas>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" class="login-form-button" size="middle"> 登 录 </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { reactive,onMounted,ref  } from 'vue';
import { useRouter } from 'vue-router';
import { UserOutlined, LockOutlined,WechatOutlined } from '@ant-design/icons-vue';
import { notification } from 'ant-design-vue';
import { login } from '@/api/login';
import storage from 'store2';
const logo = new URL('@/assets/logo.png', import.meta.url).href;
const background = new URL('@/assets/login-bg.jpg', import.meta.url).href;

// 路由
const router = useRouter();

// 表单数据
const formState = reactive({
  language:'中文',
  username: 'admin',
  password: 'admin',
  code: '1234',
});


//生命周期
onMounted(() => {
  refresh()
})

//登录转换
const changeLogin = () => {
  router.push({  name: 'CodeLogin' });
}
// 提交表单时调用的函数。
const onLogin = values => {
  // 登录成功跳转路由
  // 验证码判断
  // input.value.toLowerCase() === code.toLowerCase()
  login(values).then(data => {
    if (data.code === 0) {
      notification.open({
        message: '登录成功',
        description: '欢迎您!'
      });
      storage.set('token', '123456');
      router.push({ name: 'Console' });
    } else {
      notification.open({
        message: '登录失败',
        description: '请检查账号或密码是否正确'
      });
    }
  });
};

//验证码
const canvas = ref(null)
const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
const codeLength = 4
let code = ''

function draw() {
  //获取canvas的2D绘图上下文
  const ctx = canvas.value.getContext('2d')
  //清除画布上的内容
  ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)
  //设置字体样式
  ctx.font = 'bold 20px Arial'
  //设置文本基线
  ctx.textBaseline = 'middle'
  for (let i = 0; i < codeLength; i++) {
    const char = code.charAt(i)
    const x = 20 * i + 10
    const y = 16
    const deg = Math.random() * 30 * Math.PI / 180
    ctx.translate(x, y)
    ctx.rotate(deg)
    //在画布上绘制填充文本
    ctx.fillText(char, 0, 0)
    // 旋转画布
    ctx.rotate(-deg)
    //移动画布的原点到(x,y)
    ctx.translate(-x, -y)
  }
  for (let i = 0; i < 10; i++) {
    const x1 = Math.random() * canvas.value.width
    const y1 = Math.random() * canvas.value.height
    const x2 = Math.random() * canvas.value.width
    const y2 = Math.random() * canvas.value.height
    //开始一条路径
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    // 添加一个新点，然后在画布上创建从该点到最后指定点的线条
    ctx.lineTo(x2, y2)
    // 设置线条颜色
    ctx.strokeStyle = 'green'
    // 绘制已定义的路径
    ctx.stroke()
  }
}
//验证码刷新
function refresh() {
  code = '';
  for (let i = 0; i < codeLength; i++) {
    code += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  draw()
}


//调用书籍目录接口
const search = () => {
  axios.get(`https://api.pingcc.cn/fiction/search/title/小说/1/10`)

    .then((result) => {
      bookList.value = result.data.data
      console.log(result.data);
    })
    .catch((err) => {
      alert("书籍输入错误")
      console.log(err)
    })
}
</script>

<style lang="less" scoped>
.input-style{
  margin-bottom: 8%;
}
.container {
  display: flex;
  height: 100%;
  padding-top: 120px;
  flex-direction: column;
  align-items: center;

  .login-bg {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
  }

  .login-card {
    width: 350px;
    height: 400px;
    margin-right: -45%;
    overflow: hidden;
    position: relative;
    // 角标
  .angle_mark {
    position: absolute;
    top: -50px;
    right: -50px;
    background-image:url(xxx);
    /*xxx表示图片地址*/
    background-color: #8dd7ff;
    width: 100px;
    height: 100px;
    border-radius:50%;
    font-size: 20px;
    // transform: rotate(45deg);
    // 角标文字
    span {
      position: absolute;
      display: inline-block;
      color: rgb(40, 159, 7);
      width: 100%;
      bottom: 20px;
      left: -20px;
      text-align: center;
    }
  }
  }

  .login-form {
    width: 300px;
    padding: 0 8%;

    .login-form-header {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 15px;
    }

    .login-form-desc {
      font-size: 10px;
      color: rgba(0, 0, 0, 0.45);
      text-align: center;
    }

    .login-form-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .login-form-forgot {
      float: right;
    }

    .login-form-button {
      width: 100%;
    }
  }

  footer {
    margin-bottom: 15px;
    line-height: 30px;
    color: rgba(0, 0, 0, 0.45);
  }
}
canvas {
  margin-left: 2rem;
  vertical-align: middle;
  /*vertical-align属性设置一个元素的垂直对齐。*/
  box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: pointer;
  background-color: #eee;
}
.captcha {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
